<template>
  <div class="mui-numbox" data-numbox-step="1" data-numbox-min="1">
    <!-- mui中的js不能使用，找不到原因呢，直接手写原生进行解决 -->
    <!-- 当加减按钮被点击时改变input的value，并调用changedCounts方法进行改变数值
         同理也将goodsinfo中的按钮进行了改进
     -->
    <button class="mui-btn mui-numbox-btn-minus" @click="subValue" >-</button>
    <input class="mui-numbox-input" type="number" :value="counts" @change="changedCounts" ref="afterCounts"/>
    <button class="mui-btn mui-numbox-btn-plus" @click="addValue">+</button>
  </div>
</template>

<script>
export default {
  mounted() {
  },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    changedCounts() {
      this.$store.commit('updataInfoToCar',
      {id:this.id,counts:this.$refs.afterCounts.value}
      )
    },
    addValue() {
      this.$refs.afterCounts.value = parseInt(this.$refs.afterCounts.value) + 1
      this.changedCounts()
    },
    subValue() {
      if(parseInt(this.$refs.afterCounts.value) === 0){
        return
      }
      this.$refs.afterCounts.value -= 1
      this.changedCounts()
    }
  },
  props: ["counts","id"]
};
</script>

<style lang="scss" scoped>
</style>
